From 50a0f0240d7fef133eb5acc1bea2b1168b08e9db Mon Sep 17 00:00:00 2001 From: Factiven Date: Sun, 24 Dec 2023 13:03:54 +0700 Subject: migrate to typescript --- pages/en/manga/[...id].tsx | 456 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 456 insertions(+) create mode 100644 pages/en/manga/[...id].tsx (limited to 'pages/en/manga/[...id].tsx') diff --git a/pages/en/manga/[...id].tsx b/pages/en/manga/[...id].tsx new file mode 100644 index 0000000..d1c10a4 --- /dev/null +++ b/pages/en/manga/[...id].tsx @@ -0,0 +1,456 @@ +import Footer from "@/components/shared/footer"; +import Head from "next/head"; +import { useEffect, useState } from "react"; +import { getServerSession } from "next-auth"; +import { authOptions } from "../../api/auth/[...nextauth]"; +import { mediaInfoQuery } from "@/lib/graphql/query"; +import Modal from "@/components/modal"; +import { signIn } from "next-auth/react"; +import AniList from "@/components/media/aniList"; +import ListEditor from "@/components/listEditor"; +import MobileNav from "@/components/shared/MobileNav"; +import Image from "next/image"; +import DetailTop from "@/components/anime/mobile/topSection"; +import Characters from "@/components/anime/charactersCard"; +import Content from "@/components/home/content"; +import { toast } from "sonner"; +import getAnifyInfo from "@/lib/anify/info"; +import getMangaId from "@/lib/anify/getMangaId"; +import { useRouter } from "next/router"; +import ChaptersComponent from "@/components/manga/ChaptersComponent"; +import pls from "@/utils/request/index"; +import { AniListInfoTypes } from "types/info/AnilistInfoTypes"; +import { Navbar } from "@/components/shared/NavBar"; + +type MangaProps = { + aniId: string; + mangadexId: string; + sessions: any; + metaData: any; + chapterNotFound: string; +}; + +export default function Manga({ + aniId, + mangadexId, + sessions: session, + chapterNotFound, + metaData, +}: MangaProps) { + const [domainUrl, setDomainUrl] = useState(""); + + const [loading, setLoading] = useState(false); + const [watch, setWatch] = useState(); + + const [mangaId, setMangaId] = useState(mangadexId); + const [chapters, setChapters] = useState(null); + const [notFound, setNotFound] = useState(false); + + const [info, setInfo] = useState(null); + const [color, setColor] = useState(null); + + const [open, setOpen] = useState(false); + + const router = useRouter(); + + const rec = info?.recommendations?.nodes?.map( + (data) => data.mediaRecommendation + ); + + useEffect(() => { + setDomainUrl(window.location.origin); + }, []); + + useEffect(() => { + if (chapterNotFound) { + toast.error("Chapter not found"); + const cleanUrl = window.location.origin + window.location.pathname; + window.history.replaceState(null, "", cleanUrl); + } + }, [chapterNotFound]); + + useEffect(() => { + setMangaId(null); + }, [aniId]); + + useEffect(() => { + async function fetchData() { + try { + let info, data, color: any; + setChapters(null); + setNotFound(false); + + if (aniId && mangadexId) { + const [aniListData] = await pls.post("https://graphql.anilist.co/", { + body: JSON.stringify({ + query: mediaInfoQuery, + variables: { + id: parseInt(aniId), + type: "MANGA", + }, + }), + }); + // const aniListData = await response.json(); + info = aniListData?.data?.Media; + const textColor = setTxtColor(info?.color); + + color = { + backgroundColor: `${info?.color || "#ffff"}`, + color: textColor, + }; + + setInfo(info); + setColor(color); + setMangaId(mangadexId); + // console.log("wow two of them here"); + } else if (aniId && !mangadexId) { + const [aniListData] = await pls.post("https://graphql.anilist.co/", { + body: JSON.stringify({ + query: mediaInfoQuery, + variables: { + id: parseInt(aniId), + type: "MANGA", + }, + }), + }); + // const aniListData = await response.json(); + info = aniListData?.data?.Media; + const textColor = setTxtColor(info?.color); + + color = { + backgroundColor: `${info?.color || "#ffff"}`, + color: textColor, + }; + + setInfo(info); + setColor(color); + + const mangaId = await getMangaId( + info?.title?.romaji, + info?.title?.english, + info?.title?.native + ); + + mangadexId = (mangaId as { id: string }).id; + + if (mangadexId) { + setMangaId(mangadexId); + // console.log("mangadex is here", mangadexId); + router.push("/en/manga/" + aniId + "/" + mangadexId, undefined, { + shallow: true, + }); + } else { + // console.log("why is this running?"); + setMangaId(null); + setLoading(false); + setNotFound(true); + // router.push("/en/manga/" + aniId, undefined, { shallow: true }); + } + } else if (!aniId && mangadexId) { + data = await getAnifyInfo(mangadexId); + + const aniListId = + data.mappings?.filter((i: any) => i.providerId === "anilist")[0] + ?.id || null; + + if (aniListId) { + const [aniListData] = await pls.post( + "https://graphql.anilist.co/", + { + body: JSON.stringify({ + query: mediaInfoQuery, + variables: { + id: parseInt(aniListId), + type: "MANGA", + }, + }), + } + ); + // const aniListData = await response.json(); + info = aniListData?.data?.Media; + + router.push( + "/en/manga/" + aniListId + "/" + mangadexId, + undefined, + { shallow: true } + ); + } + + const textColor = setTxtColor(data?.color); + + color = { + backgroundColor: `${data?.color || "#ffff"}`, + color: textColor, + }; + + setInfo(aniListId ? info : data); + setColor(color); + setMangaId(mangadexId); + } + } catch (error) { + console.log(error); + } + } + fetchData(); + + return () => { + setInfo(null); + }; + }, [session?.user?.token, aniId, mangadexId]); + + function handleOpen() { + setOpen(true); + document.body.style.overflow = "hidden"; + } + + function handleClose() { + setOpen(false); + document.body.style.overflow = "auto"; + } + + return ( + <> + + + {metaData + ? `Manga - ${ + metaData.title.romaji || + metaData.title.english || + metaData.title.native + }` + : "Getting Info..."} + + + + + + + + + + + + + + + + + + handleClose()}> +
+ {!session && ( +
+
+ Edit your list +
+ +
+ )} + {session && info && ( + + )} +
+ + +
+
+
+ {info?.bannerImage && ( + banner anime + )} +
+
+ {/* {info && ( */} + + {/* )} */} + + + + {info && info.characters.edges.length > 0 && ( +
+ +
+ )} + + {info && rec && rec?.length !== 0 && ( +
+ +
+ )} +
+
+